<template>
  <div class="home-container">
    <!-- 顶部栏 -->
    <van-nav-bar fixed placeholder>
      <template #left>
        <div class="logo"></div>
      </template>
      <template #right>
        <div>
          <van-button
            round
            class="search-btn"
            icon="search"
            type="info"
            size="small"
          >
            搜索
          </van-button>
        </div>
      </template>
    </van-nav-bar>
    <!-- tab标签页 -->
    <van-tabs
      v-model="active"
      title-active-color="cyan"
      color="green"
      @click="tabClick"
    >
      <!-- 渲染列表 -->
      <van-tab v-for="item in channels" :key="item.id" :title="item.name">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-cell
              v-for="item in list"
              :key="item.art_id"
              :title="item.title"
            >
              <!-- 宫格布局 -->
              <!-- 具名插槽 -->
              <template #label>
                <van-grid :column-num="item.cover.type">
                  <van-grid-item
                    v-for="(img, index) in item.cover.images"
                    :key="index"
                  >
                    <van-image lazy-load :src="img" />
                  </van-grid-item>
                </van-grid>
                <!-- div显示文本 -->
                <div id="author">
                  <span>{{ item.aut_name }}</span>
                  <span>{{ item.comm_count }} </span>
                  <span>{{ item.pubdate | fromNow }} </span>
                </div>
              </template>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
// 导入接口
import { getChannels, getArticles } from './home.js'
//导入moment
import moment from 'moment'
//设置语言
moment.locale('zh-cn')

export default {
  name: 'home',
  data () {
    return {
      active: 0, //tab栏

      list: [], //文章列表
      loading: false, //触底
      finished: false, //上拉加载动画
      isLoading: false, //下拉刷新
      channels: {}, //频道列表

      timestamp: null
    }
  },
  async created () {
    // 发起请求
    let res = await getChannels()
    // console.log(res)
    // 绑定数据
    this.channels = res.data.data.channels
  },
  methods: {
    async onLoad () {
      // 判断是否下拉刷新
      if (this.isLoading) {
        // 清空列表
        this.list = []
        // 设置下拉刷新为false
        this.isLoading = false
        // 清空timestamp
        this.timestamp = null
      }
      // 加载更多数据
      if (!this.timestamp) {
        // 获取当前时间戳
        this.timestamp = Date.now()
      }
      // 发送文章列表请求
      let res = await getArticles({
        channel_id: 0,
        timestamp: this.timestamp
      })
      // 修改时间戳为服务器返回的时间戳
      this.timestamp = res.data.pre_timestamp
      // 绑定数据渲染页面
      this.list.push(...res.data.data.results)
      // 加载结束
      this.loading = false
      //数据全部加载完成
      if (this.list.length >= 100) {
        this.finished = true
      }
    },

    onRefresh () {
      // 一旦下拉刷新,无条件finished为false
      this.finished = false
      // 清空数据
      this.list = []
      // 设置上啦加载更多为true
      this.loading = true
      // 重新发起请求
      this.onLoad()
      // 关闭下拉加载动画
      this.isLoading = false
    },
    // 切换tab栏事件
    tabClick () {
      // 清空列表
      this.list = []
      // 配套login加载状态
      this.loading = true
      // 重新渲染页面
      this.onLoad()
    }
  },
  //过滤器
  filters: {
    fromNow (value) {
      return moment(value).fromNow()
    }
  }
}
</script>

<style lang="less">
* {
  box-sizing: border-box;
}
// 版心
.home-container {
  height: 100vh;

  padding-bottom: 50px;

  .van-nav-bar {
    background-color: #0098fa;
  }
  // logo
  .logo {
    background: url('~@/assets/logo.png') no-repeat;
    background-size: cover;
    width: 100px;
    height: 30px;
  }
  // 搜索按钮
  .search-btn {
    background-color: #1dadfb;
    width: 100px;
    font-style: 14px;
    border: none;
    .van-icon {
      color: #fff;
    }
    .van-button__text {
      color: #fff;
    }
  }
  // tab栏
  .van.tabs {
    height: 100%;
    padding-bottom: 50px;
    .van-tabs__wrap {
      position: fixed;
      width: 100%;
      left: 0;
      right: 0;
      top: 46px;
      // 脱标后被盖住增加层级显示到最上层
      z-index: 10;
    }
    .van-tabs__content {
      height: 100%;
      overflow-y: scroll;
    }
  }
  #author span {
    padding-right: 20px;
  }
}
</style>
